<!-- 新增船代 -->
<template>
  <div class="new-newBoat-dialog">
    <el-dialog
      width="800px"
      class=""
      top="6vh"
      title="新增"
      :visible="$store.state.dialog.newBoat"
      @close="close">
      <el-row>
        <el-col :span="24">
          <el-card shadow="hover">
            <el-form :model="newForm" label-width="110px" size="mini" :rules="rules" ref="newForm">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="船代公司名称" prop="boatAgentName">
                    <el-input v-model="newForm.boatAgentName" auto-complete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="状态" prop="state">
                    <el-select placeholder="请选择" v-model="newForm.state">
                      <el-option label="休眠" value="0"></el-option>
                      <el-option label="激活" value="1"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="提单号" prop="oddNum">
                    <el-input v-model="newForm.oddNum" auto-complete="off"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="有效期" prop="effectiveDate">
                     <el-date-picker
                      v-model="newForm.effectiveDate"
                      value-format="yyyy-MM-dd"
                      align="right"
                      :picker-options="pickerOptions1"
                      placeholder="选择日期时间">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sureBoatAdd('newForm')" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { InsertBoatAgentCom } from '../api/putBoxCompany'
export default {
  data () {
    return {
      newForm: {},
      rules: {
        boatAgentName: [
          { required: true, message: '请输入中文姓名', trigger: 'blur' },
          { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
        ],
        state: [
          { required: true, message: '请选择状态', trigger: 'blur' }
        ],
        oddNum: [
          { required: true, message: '请输入提单号', trigger: 'blur' }
        ],
        effectiveDate: [
          { required: true, message: '请输入有效期', trigger: 'blur' }
        ]
      },
      pickerOptions1: {
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '明天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '后天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 2)
            picker.$emit('pick', date)
          }
        }]
      }
    }
  },
  async mounted () {},
  methods: {
    // 添加
    async addBoatcompy () {
      const res = await InsertBoatAgentCom(this.newForm)
      if (res.status === 200) {
        this.$parent.getTableOrSearch(1, 10)
        this.$store.commit('hide_new_boat_dialog')
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 确认添加
    sureBoatAdd (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addBoatcompy()
        } else {
          return false
        }
      })
    },
    close () {
      this.$store.commit('hide_new_boat_dialog')
    }
  }
}
</script>

<style scoped lang="less">

</style>
